<template>
    <div class="carLoan">
        <Form ref="carAdditioalLoanForm" :model="carAdditioalLoanForm"  :label-width="90">
            <div class="common_content" style="padding: 0px;"> 
                 <Row>
                    <Col>
                        <FormItem label="车辆价格(元)"> 
                            <Input v-model="carAdditioalLoanForm.oldValue.guidePrice"  placeholder="" :readonly="readonly"/>
                        </FormItem> 
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <common-finance
                        :financeForm="carAdditioalLoanForm"
                        ></common-finance>
                    </Col>
                </Row>
                <Row>
                      <Col>
                        <FormItem label="贷款期限(期)" > 
                            <div class="inline-block" v-if="carAdditioalLoanForm.newValue.loanLimit"> 
                                <Input v-model="carAdditioalLoanForm.newValue.loanLimit" style="width:60px" placeholder="" :readonly="readonly"/>
                                <span  class="commonSpan">期</span>
                            </div>
                            <div class="oldValue">
                                <span>{{carAdditioalLoanForm.oldValue.loanLimit}}</span><b style="font-weight: normal;">期</b>
                            </div> 
                        </FormItem> 
                    </Col>
                </Row>
                 <Row>
                      <Col span="12">
                        <FormItem label="首付"> 
                            <div  class="inline-block" v-if="carAdditioalLoanForm.newValue.downPayScale">
                                <Input v-model="carAdditioalLoanForm.newValue.downPayScale" style="width:60px" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan">%</span>
                            </div>
                            <div class="oldValue">
                                <span>{{carAdditioalLoanForm.oldValue.downPayScale}}</span><b style="font-weight: normal;">%</b>
                            </div>
                        </FormItem> 
                    </Col>
                    <Col span="12">
                        <FormItem label="" :label-width="20"> 
                            <div  class="inline-block" v-if="carAdditioalLoanForm.newValue.downPayAmt">
                                <Input v-model="carAdditioalLoanForm.newValue.downPayAmt" style="width: 120px;" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan">元</span>
                            </div>
                            <div class="oldValue">
                                <span>{{carAdditioalLoanForm.oldValue.downPayAmt}}</span><b style="font-weight: normal;">元</b>
                            </div>
                        </FormItem> 
                    </Col>
                </Row>
                  <Row v-if="isTail">
                      <Col span="12">
                        <FormItem label="尾款"> 
                            <div class="inline-block" v-if="carAdditioalLoanForm.newValue.tailPayScale">
                                <Input v-model="carAdditioalLoanForm.newValue.tailPayScale" style="width:60px" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan">%</span>
                            </div>
                            <div class="oldValue">
                                <span>{{carAdditioalLoanForm.oldValue.tailPayScale}}</span><b style="font-weight: normal;">%</b>
                            </div>
                        </FormItem> 
                    </Col>
                    <Col span="12">
                        <FormItem label="" :label-width="20"> 
                            <div  class="inline-block" v-if="carAdditioalLoanForm.newValue.tailPayAmt">
                                <Input v-model="carAdditioalLoanForm.newValue.tailPayAmt" style="width: 120px;" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan">元</span>
                            </div>
                            <div class="oldValue">
                                <span>{{carAdditioalLoanForm.oldValue.tailPayAmt}}</span><b style="font-weight: normal;">元</b>
                            </div>
                        </FormItem> 
                    </Col>
                </Row>
                 <Row>
                    <Col>
                        <FormItem label="贷款金额(元)"> 
                            <div  class="inline-block" v-if="carAdditioalLoanForm.newValue.loanAmt">
                                <Input v-model="carAdditioalLoanForm.newValue.loanAmt" class="w200" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan">元</span>
                            </div>
                            <div class="oldValue">
                                <span>{{carAdditioalLoanForm.oldValue.loanAmt}}</span><b style="font-weight: normal;">元</b>
                            </div>
                        </FormItem> 
                    </Col>
                 </Row>
            </div>
        </Form>
    </div>
</template>
<script>
import * as utils from '_p/afs-apply/assets/js/utils.js'
import vueEvent from "_p/afs-apply/assets/js/vueEvent.js"
import CommonFinance from "../common-finance/common-finance"
import {
    getProductRate,
} from "_p/afs-apply/api/apply-report/personal/financialProducts.js"
export default {
    name:"carLoan",
    data(){
        return{
            isTail:0,
            readonly:true,
            isTail:"",
            carAdditioalLoanForm:{
                newValue:{
                },
                oldValue:{
                },
                //项目融资列表
                additionalAmtList:[
                ],
            },
        }
    },
    computed:{
      
    },
    components:{
        CommonFinance,
    },
    props:{
        carCostDetails:{
            type:Object
        },
    },
    watch:{
        carCostDetails(val){
            if(Object.keys(val).length>0){
                this.isTail=eval(val.isTail);
                let {newCarValue,oldCarValue}=val;
                this.carAdditioalLoanForm.newValue=newCarValue;
                this.carAdditioalLoanForm.oldValue=oldCarValue;
                if(val.finItemList&&val.finItemList.length>0){
                    let tempArr=[];
                    val.finItemList.forEach((item,index)=>{
                        let obj={
                            extrasProjectAmt:item.financeItemAmt,
                            extrasProjectName:item.financeItemName
                        }
                        tempArr.push(obj);
                    })
                    this.carAdditioalLoanForm.additionalAmtList=tempArr;
                }
            }
        }
    },
    created(){  
        
    },
    mounted(){
        let _this=this;
    },
    beforeDestroy () {
    },
    methods:{
    
    }
}
</script>
<style scoped>
.oldValue{
    display:inline-block;
    margin-left: 10px;
}
</style>